<template>
    <van-nav-bar title="" :right-text="leftText" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
        <van-search
            v-model="keyword"
            placeholder="请输入搜索关键词"
            slot="title"
            @search="onSearch"
        >
            <template slot="left-icon">
                <van-icon name="search" size="20"/>
            </template>
        </van-search>
    </van-nav-bar>
</template>

<script>
    export default {
        name: "TopSearchBar",
        props: {
            leftText: {
                type:String,
                default:""
            },
            rightText:{
                type:String,
                default: ""
            }
        },
        data(){
            return {
                keyword:""
            }
        },
        created() {
            this.keyword = this.$route.query.keyword ? this.$route.query.keyword : "";
        },
        methods:{
            onClickLeft() {
                this.$emit("click-left")
            },
            onClickRight() {
                this.$emit("click-right")
            },
            onSearch(){
                this.$emit("search",this.keyword);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .van-nav-bar {
        background-color: #FFFFFF;
        .van-search__content{
            background-color: #fff4f5;
        }
        .van-icon{
            color: #333333;
        }

        .van-nav-bar__title {
            max-width: 82vw;
        }
        .van-search {
            background-color: transparent;
            padding: 7px 12px;
            .van-search__content {
                border-radius: 20px;
            }

        }
        .van-icon-search::before {
            color: #333333;
        }
        .van-icon-search {
            color: #333333;
        }

    }
</style>